<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" >
    <title>ArkWeb 双向通信测试</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
            line-height: 1.5;
        }

        #log {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #eee;
            min-height: 200px;
            max-height: 400px;
            background: #fff;
            font-size: 22px;
            line-height: 1.8;
            overflow-y: auto;
            overflow-x: hidden;
            word-break: break-all;
            overflow-wrap: break-word;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
            will-change: scroll-position;
        }

        .buttonDiv {
            display: flex;
            width: 100%;
            height: 150px;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            box-sizing: border-box;
        }

        button {
            margin: 0 8px;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #42b983;
            color: white;
            cursor: pointer;
            width: 30%;
            height: 150px;
            font-size: xx-large
        }
    </style>
</head>

<body>
    <h1>ArkWeb 与原生交互测试</h1>

    <h2>1. 调用原生方法</h2>
    <div class="buttonDiv">
        <button onclick="callNativeTest()">调用test方法</button>
        <button onclick="callNativeTestArr()">调用testArr方法</button>
        <button onclick="callNativeTestObj()">调用testObj方法</button>
    </div>

    <h2>2. 双向通信</h2>
    <button onclick="sendMessageToNative()">发送消息到原生</button>
    <div id="log">日志输出：<br></div>

    <script>
        let nativePort = null; // 存储原生传递的通信端口

        // 监听原生发送的端口消息
        window.addEventListener('message', (event) => {
            if (event.data === 'initMessageChannel' && event.ports.length > 0) {
                nativePort = event.ports[0];
                log('双向通信通道建立成功');

                // 监听原生发送的消息
                nativePort.onmessage = (e) => {
                    log(`收到原生消息：${e.data}`);
                };
            }
        });

        // 调用原生 test() 方法
        function callNativeTest() {
            if (window.myTestObj) {
                const result = myTestObj.test();
                log(`调用 test() 结果：${result}`);
            } else {
                log('未注册 myTestObj，请先点击原生的「注册 JS 原生对象」按钮');
            }
        }

        // 调用原生 testArr() 方法
        function callNativeTestArr() {
            if (window.myTestObj) {
                const result = myTestObj.testArr();
                log(`调用 testArr() 结果：${JSON.stringify(result)}`);
            } else {
                log('未注册 myTestObj，请先点击原生的「注册 JS 原生对象」按钮');
            }
        }

        // 调用原生 testObj() 方法
        function callNativeTestObj() {
            if (window.myTestObj) {
                const result = window.myTestObj.testObj();
                log(`调用 testObj() 结果：${JSON.stringify(result)}`);
            } else {
                log('未注册 myTestObj，请先点击原生的「注册 JS 原生对象」按钮');
            }
        }

        // 发送消息到原生
        function sendMessageToNative() {
            if (nativePort) {
                const msg = `Web 发送的消息：${new Date().toLocaleTimeString()}`;
                nativePort.postMessage(msg);
                log(`发送消息到原生：${msg}`);
            } else {
                log('未建立通信通道，请先点击原生的「建立双向通信通道」按钮');
            }
        }

        // 日志输出
        function log(content) {
            const logDiv = document.getElementById('log');
            logDiv.innerHTML += `${new Date().toLocaleTimeString()}：${content}<br>`;
        }
    </script>
</body>

</html>